<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/views/global/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath %>">
<%@include file="/views/global/ShopInclude.jsp" %>
<link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.css">
<link href="static/css/page/address.css" rel="stylesheet" type="text/css">
<title>ADDRESS</title>
</head>
<body>
<div class="main-md center font">
	<div class="box-heading">
		<div class="box-title">Enter An Address 输入地址</div>
	</div>
	<!-- 表单填写部分 -->
    <form id="submitForm" name="submitForm" class="address-form validate">
		<input type="hidden" name="id" value="${entity.id }"/>
		<div id="msg"></div>
		<div class="row">
			<div class="col-xs-4 address-group">
				<label class="control-label">Country 国家</label>
				<select class="form-control" name="countryId" id="countryId">
   				</select>
   				<input type="hidden" name="countryName" value="${entity.countryName }"/>
			</div>
			<div class="col-xs-4 address-group">
				<label class="control-label">State / Province / Region 省</label>
				<select class="form-control" name="stateId" id="stateId">
   					<option value="">&nbsp;</option>
   				</select>
   				<input type="hidden" name="stateName" value="${entity.stateName }"/>
			</div>
			<div class="col-xs-4 address-group">
				<label class="control-label">City 市</label><br/>
				<select class="form-control" name="cityId" id="cityId">
   					<option value="">&nbsp;</option>
   				</select>
   				<input type="hidden" name="cityName" value="${entity.cityName }"/>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-6">
				<label class="control-label">Street 街道</label>
				<input type="text" class="form-control" id="street" name="street" 
				 	placeholder="" required="true" value="${entity.street }"/>
				<span class="error"></span>
			</div>
			<div class="col-xs-5" style="width: 45.4%;">
				<label class="control-label">Apt / Suite / Other 详细地址</label>
				<input type="text" class="form-control" id="district" name="district" 
				 	placeholder="" value="${entity.district }"/>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-4">
				<label class="control-label">Postal Code 邮政编码</label>
				<input type="text" class="form-control" id="postalCode" name="postalCode" 
				 	placeholder="" required="true" value="${entity.postalCode }"/>
				<span class="error"></span>
			</div>
			<div class="col-xs-4">
				<label class="control-label">Full Name 全名</label>
				<input type="text" class="form-control" id="userName" name="userName" 
				 	placeholder="" value="${entity.userName }"/>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-4">
				<label class="control-label">Mobile Phone Number 联系方式</label>
				<select name="mobileArea" class="form-control">
					<option value="086">Chinese Mainland +86</option>
				</select>
			</div>
			<div class="col-xs-4">
				<label class="control-label">&nbsp;</label>
				<input type="text" class="form-control" id="mobilePhone" name="mobilePhone" 
				 	placeholder="" value="${entity.mobilePhone }"/>
			</div>
		</div>
	</form>
	<div class="box-footer">
		<div class="row">
			<!-- <div class="pull-left">
				<button type="button" id="btnCancel" class="btn btn-default">Cancel 取消</button>
			</div> -->
			<div style="text-align: center;">
				<button type="button" id="btnSave" class="btn btn-green">Save Address 保存</button>
			</div>
		</div>
	</div>
  </div>
</body>
<%@include file="/views/global/AdminScripts.jsp" %>
<script type="text/javascript" src="static/javascript/module/area.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	initCountryList(function(){
		$("#countryId").val("${entity.countryId }");
		updateStateList(function(){
			$("#stateId").val("${entity.stateId }");
			updateCityList(function(){$("#cityId").val("${entity.cityId }");});
		});
	});
	
	$("SELECT[name='mobileArea']").val('${entity.mobileArea}');
	$("#btnCancel").click(function(){
		art.dialog.close();
	});
	
	$("#btnSave").click(function(){
		var form = $("#submitForm");
		var validator = $(form).validate({meta:"validate"});
		if(validator.form()){
			$("input[name='countryName']").val($("#countryId").find("option:selected").html());
			$("input[name='stateName']").val($("#stateId").find("option:selected").html());
			$("input[name='cityName']").val($("#cityId").find("option:selected").html());
	        $(form).goAjax({
	    		semantic: false,
	    		checkLogin: true,
	    		url: 'buyer/address/save',
	    		data:{},
	    		success: function(jsonData) {
	    			if(true == jsonData.success){
	    				art.dialog.data("refresh.now", "true");
	    				art.dialog.close();
	    			} else {
	    				$("#msg").alert({type:'alert-danger', text: jsonData.message});
	    			}
	    		}
	    	});
		}
	});
});
</script>
</html>
